<template>
  <div>
    <ul>
      <!-- v-for 语法:循环渲染解构 -->
      <!-- 要循环渲染谁，就把v-for写在哪个标签上 -->
      <li :key="index" v-for="(item, index) in arr">{{ item }}</li>
      <!-- vue支持数字来渲染，表示循环n个元素，循环遍历就是序号，从1开始 -->
      <button @click="add">点击我加一个</button>
    </ul>
  </div>
</template>

<script>
//真实dom两者比对，属性太多复杂，循环比对效率太低；虚拟dom效率高
export default {
  data() {
    return {
      arr: ["抽烟", "喝酒", "打麻将", "掐火锅"],
    };
  },
  methods: {
    add() {
      this.arr.splice(1, 0, "洗脚");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>